import React from 'react';
import {
  CalendarOutlined,
  MailOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import { Menu } from 'antd';
import { useNavigate } from 'react-router-dom';
const items = [
  {
    key: '/',
    icon: <MailOutlined />,
    label: '首页',
  },
  {
    key: '/myFavorite',
    icon: <CalendarOutlined />,
    label: '我的喜欢',
  },
  {
    key: 'sub2',
    label: 'Navigation Three',
    icon: <SettingOutlined />,
    children: [
      {
        key: '7',
        label: 'Option 7',
      },
      {
        key: '8',
        label: 'Option 8',
      }
    ]
  },
];
const MenuItem = () => {
  const navigate = useNavigate() 
  return (
    <>
      <Menu
        style={{
          width: 256,
        }}
        defaultSelectedKeys={['/']}
        onClick={(item) => {
          navigate(item.key)
          console.log(item.key);
        }}
        mode='inline'
        theme='light'
        items={items}
      />
    </>
  );
};
export default MenuItem;